<template>
  <div class="app-container">



    <el-row>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header">
                <el-form :model="carBrandQueryParams" ref="carBrandQueryForm" :inline="true" v-show="showSearch" label-width="68px">
                  <div style="display: flex;justify-content: space-between;">
                    <div style="display: inline-block">
                      <el-form-item style="margin-bottom: 0 !important;">
                        <el-button type="primary"  size="mini" @click="handleCarBrandAdd"  v-hasPermi="['car:brand:add']" >新增品牌</el-button>
                      </el-form-item>
                    </div>
                    <div style="display: inline-block">
                      <el-form-item label="" prop="brandName" style="margin-bottom: 0 !important;">
                        <el-input
                          v-model="carBrandQueryParams.brandName"
                          placeholder="请输入品牌名称"
                          clearable
                          size="small"
                          @keyup.enter.native="handleCarBrandQuery"
                        />
                      </el-form-item>
                      <el-form-item style="margin-bottom: 0 !important;">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCarBrandQuery">搜索</el-button>
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
              </div>
              <el-table v-loading="carBrandLoading"
                  highlight-current-row
                  @current-change="handleCarBrandCurrentChange"
                  ref="carBrandTable" :data="carBrandList" border  style="margin-top:6px;">
                  <el-table-column label="品牌名称" align="center" prop="brandName" />
                  <el-table-column label="品牌图标" align="center" width="100">
                    <template slot-scope="scope">
                      <el-image v-if="scope.row.logo" class="preview" :src="getImgUrl(scope.row.logo)"
                                style="height: 50px; width: 50px;"
                                :preview-src-list="[getImgUrl(scope.row.logo)]" fit="contain"  > </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleCarbrandUpdate(scope.row)"
                        v-hasPermi="['car:brand:edit']"
                      >修改</el-button>
                    </template>
                  </el-table-column>
                </el-table>

            <pagination
              v-show="carBrandTotal>0"
              :total="carBrandTotal"
              :page.sync="carBrandQueryParams.pageNum"
              :limit.sync="carBrandQueryParams.pageSize"
              @pagination="getCarBrandList"
            />
            </el-card>
          </el-col>



           <el-col :span="11" style="margin-left:10px;">
              <el-card class="box-card">
                <div slot="header" >
                  <el-form :model="carSeriesQueryParams" ref="carBrandQueryForm" :inline="true" v-show="showSearch" label-width="68px">
                    <div style="display: flex;justify-content: space-between;">
                      <div style="display: inline-block">
                        <el-form-item style="margin-bottom: 0 !important;">
                          <el-button type="primary"  size="mini" @click="handleCarSeriesAdd"  v-hasPermi="['car:series:add']" >新增车系</el-button>
                        </el-form-item>
                      </div>
                      <div style="display: inline-block">

                        <el-form-item label="" prop="seriesName" style="margin-bottom: 0 !important;" v-show="currentCarBrand != null">
                          <span>车辆品牌---{{formatBrandName() || '--'}}</span>
                        </el-form-item>
                        <el-form-item label="" prop="seriesName" style="margin-bottom: 0 !important;">
                          <el-input
                            v-model="carSeriesQueryParams.seriesName"
                            placeholder="请输入车系名称"
                            clearable
                            size="small"
                            @keyup.enter.native="listCarSeriesByBrandId"
                          />
                        </el-form-item>
                        <el-form-item style="margin-bottom: 0 !important;">
                          <el-button type="primary" icon="el-icon-search" size="mini" @click="listCarSeriesByBrandId">搜索</el-button>
                        </el-form-item>
                      </div>
                    </div>
                  </el-form>
                </div>

                <el-table v-loading="carSeriesLoading"
                  ref="carSeriesTable" :data="carSeriesList" border  style="margin-top:6px;">
                  <el-table-column label="车系名称" align="center" prop="seriesName" />
                  <el-table-column label="列表图片" align="center" width="100">
                    <template slot-scope="scope">
                      <el-image v-if="scope.row.pnglogo" class="preview" :src="getImgUrl(scope.row.pnglogo)"
                                style="height: 50px; width: 50px;"
                                :preview-src-list="[getImgUrl(scope.row.pnglogo)]" fit="contain"  > </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="详情图片" align="center" width="100">
                    <template slot-scope="scope">
                      <el-image v-if="scope.row.seriesImg" class="preview" :src="getImgUrl(scope.row.seriesImg)"
                                style="height: 50px; width: 50px;"
                                :preview-src-list="[getImgUrl(scope.row.seriesImg)]" fit="contain"  > </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleCarSeriesUpdate(scope.row)"
                        v-hasPermi="['car:series:edit']"
                      >修改</el-button>
                    </template>
                  </el-table-column>
                </el-table>


                <pagination
                  v-show="carSeriesTotal>0"
                  :total="carSeriesTotal"
                  :page.sync="carSeriesQueryParams.pageNum"
                  :limit.sync="carSeriesQueryParams.pageSize"
                  @pagination="listCarSeriesByBrandId"
                />
              </el-card>




          </el-col>

    </el-row>




    <el-dialog :carBrandTitle="carBrandTitle" :visible.sync="openCarBrand" width="500px" append-to-body>
      <el-form ref="carBrandForm" :model="carBrandForm" :rules="carBrandRules" label-width="80px">
        <el-row>
            <el-col :span="24">
              <el-form-item label="品牌名称" prop="brandName">
                <el-input v-model="carBrandForm.brandName" :maxlength="50" placeholder="请输入品牌名称" />
              </el-form-item>
            </el-col>
        </el-row>
      <el-row>
          <el-col :span="24">
                <el-form-item label="品牌图标" prop="logo">
                    <ImageUpload @on-success="logoSuccessImage" v-model="carBrandForm.logo" :limit="1" @on-remove="logoRemoveImage"/>
                </el-form-item>
          </el-col>
      </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCarBrandForm">确 定</el-button>
        <el-button @click="cancelCarBrand">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :carSeriesTitle="carSeriesTitle" :visible.sync="openCarSeries" width="50%" append-to-body>
      <el-form ref="carSeriesForm" :model="carSeriesForm" :rules="carSeriesRules" label-width="180px">
        <el-row>
            <el-col :span="16">
              <el-form-item label="车系名称" prop="seriesName">
                <el-input v-model="carSeriesForm.seriesName" :maxlength="50" placeholder="请输入车系名称" />
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="列表图片" prop="pnglogo">
              <ImageUpload @on-success="pnglogoSuccessImage" v-model="carSeriesForm.pnglogo" :limit="1" @on-remove="pnglogoRemoveImage"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="详情图片" prop="seriesImg">
              <ImageUpload @on-success="seriesImgSuccessImage" v-model="carSeriesForm.seriesImg" :limit="1" @on-remove="seriesImgRemoveImage"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="primary" @click="submitCarSeriesForm">确 定</el-button>
        <el-button @click="cancelCarSeries">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>


import { listSeries as listCarSeriesByBrandId, getSeries as getCarSeries,  addSeries as addCarSeries, updateSeries as updateCarSeries } from "@/api/car/series";
import { listBrand as listCarBrand, getBrand as getCarBrand, addBrand as addCarBrand, updateBrand as updateCarBrand } from "@/api/car/brand";

export default {
  name: "CarBrand",

  data() {
    return {
      // 遮罩层
      carBrandLoading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      carBrandTotal: 0,
      carSeriesTotal: 0,
      // 表格数据
      carBrandList: [],
      // 弹出层标题
      carBrandTitle: "",
      // 是否显示弹出层
      openCarBrand: false,
      // 查询参数
      carBrandQueryParams: {
        pageNum: 1,
        pageSize: 10,
        brandName: null,
        disabled: '-1'
      },
      // 查询参数
      carSeriesQueryParams: {
        pageNum: 1,
        pageSize: 10,
        seriesName: null,
        carBrandId: null
      },
      // 表单参数
      carBrandForm: {},
      // 表单校验
      carBrandRules: {
          brandName: [
            { required: true, message: "品牌名称不能为空", trigger: "blur" }
          ]
      },
      carSeriesLoading:true,
      // 表格数据
      carSeriesList: [],
      // 弹出层标题
      carSeriesTitle: "",
      // 是否显示弹出层
      openCarSeries: false,
      // 表单参数
      carSeriesForm: {},
      // 表单校验
      carSeriesRules: {
          seriesName: [
            { required: true, message: "车系名称不能为空", trigger: "blur" }
          ]
      },
      currentCarBrand: null
    };
  },
  created() {
    this.getCarBrandList();
  },
  methods: {
    formatBrandName(){
        if(null == this.currentCarBrand){
           return "--";
        }
        return this.currentCarBrand.brandName;
    },
    handleCarSeriesStatusChange(row){
        let text = row.disabled === 0 ? "停用" : "启用";
            this.$modal.confirm('确认要"' + text + '""' + row.seriesName + '"车系吗？').then(function() {
              return updateCarSeries(row);
            }).then(() => {
              this.$modal.msgSuccess(text + "成功");
            }).catch(function() {
              row.disabled = row.disabled === 0 ? 1 : 0;
        });
    },
    /** 新增按钮操作 */
    handleCarSeriesAdd() {
      this.resetCarSeries();
      this.openCarSeries = true;
      this.carSeriesTitle = "添加车系"+this.carSeriesForm.carBrandName;
    },
    /** 修改按钮操作 */
    handleCarSeriesUpdate(row) {
      this.resetCarSeries();
      const id = row.seriesId;
      getCarSeries(id).then(response => {
        this.carSeriesForm = response.data;
        this.openCarSeries = true;
        this.carSeriesTitle = "修改车系";
      });
    },
    /** 提交按钮 */
    submitCarSeriesForm() {
       if(this.currentCarBrand == null){
        return;
      }
      this.carSeriesForm.carBrandId=this.currentCarBrand.brandId;
      this.$refs["carSeriesForm"].validate(valid => {
        if (valid) {
          if (this.carSeriesForm.seriesId != null) {
            updateCarSeries(this.carSeriesForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openCarSeries = false;
              this.listCarSeriesByBrandId();
            });
          } else {
            addCarSeries(this.carSeriesForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openCarSeries = false;
              this.listCarSeriesByBrandId();
            });
          }
        }
      });
    },
    // 取消按钮
    cancelCarSeries() {
      this.openCarSeries = false;
      this.resetCarSeries();
    },
    // 表单重置
    resetCarSeries() {
      this.carSeriesForm = {
        id: null,
        seriesName: null,
        carBrandId:null
      };
      this.resetForm("carSeriesForm");
    },
    listCarSeriesByBrandId(){
        this.carSeriesList=[];
        if(this.currentCarBrand == null){
           return;
        }else{
          const carBrandId=this.currentCarBrand.brandId;
          this.carSeriesLoading = true;
          this.carSeriesQueryParams.carBrandId=carBrandId
          listCarSeriesByBrandId(this.carSeriesQueryParams).then(response => {
              this.carSeriesList = response.rows;
              this.carSeriesTotal = response.total;
              this.carSeriesLoading = false;
          });
        }
    },
    handleCarBrandCurrentChange(val){
        this.currentCarBrand=val;
        this.carSeriesQueryParams.pageNum=1
        this.listCarSeriesByBrandId();
    },
    setCurrent(row) {
        this.$refs.carBrandTable.setCurrentRow(row);
    },
     handleClick(tab, event){
        this.getCarBrandList(tab.name);
     },
      logoRemoveImage(file) {
        this.carBrandForm.logo = null;
      },
      logoSuccessImage(res) {
        this.carBrandForm.logo = res.fileName;
        this.$refs['carBrandForm'].validateField('logo');
      },

    pnglogoRemoveImage(file) {
        this.carSeriesForm.pnglogo = null;
      },
    pnglogoSuccessImage(res) {
        this.carSeriesForm.pnglogo = res.fileName;
        this.$refs['carSeriesForm'].validateField('pnglogo');
      },

    seriesImgRemoveImage(file) {
        this.carSeriesForm.seriesImg = null;
      },
    seriesImgSuccessImage(res) {
        this.carSeriesForm.seriesImg = res.fileName;
        this.$refs['carSeriesForm'].validateField('seriesImg');
      },

    /** 查询列表 */
    getCarBrandList() {
      this.carBrandLoading = true;
      listCarBrand(this.carBrandQueryParams).then(response => {
        this.carBrandList = response.rows;
        this.carBrandTotal = response.total;
        this.carBrandLoading = false;
        if(this.carBrandList != null && this.carBrandList.length > 0){
            this.setCurrent(this.carBrandList[0]);
        }else{
          this.currentCarBrand = null;
          this.carSeriesList=[];
        }

      });
    },
    // 取消按钮
    cancelCarBrand() {
      this.openCarBrand = false;
      this.resetCarBrand();
    },
    // 表单重置
    resetCarBrand() {
      this.carBrandForm = {
        id: null,
        brandName: null,
        logo: null
      };
      this.resetForm("carBrandForm");
    },
    /** 搜索按钮操作 */
    handleCarBrandQuery() {
      this.carBrandQueryParams.pageNum = 1;
      this.getCarBrandList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("carBrandQueryForm");
      this.handleCarBrandQuery();
    },
    /** 新增按钮操作 */
    handleCarBrandAdd() {
      this.resetCarBrand();
      this.openCarBrand = true;
      this.carBrandTitle = "添加品牌";
    },
    /** 修改按钮操作 */
    handleCarbrandUpdate(row) {
      this.resetCarBrand();
      const id = row.brandId;
      getCarBrand(id).then(response => {
        this.carBrandForm = response.data;
        this.openCarBrand = true;
        this.carBrandTitle = "修改品牌";
      });
    },
    /** 提交按钮 */
    submitCarBrandForm() {
      this.$refs["carBrandForm"].validate(valid => {
        if (valid) {
          if (this.carBrandForm.brandId != null) {
            updateCarBrand(this.carBrandForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openCarBrand = false;
              this.getCarBrandList();
            });
          } else {
            addCarBrand(this.carBrandForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openCarBrand = false;
              this.getCarBrandList();
            });
          }
        }
      });
    },
    // 状态修改
    handleCarBrandStatusChange(row) {
      let text = row.disabled === 0 ? "停用" : "启用";
      this.$modal.confirm('确认要"' + text + '""' + row.brandName + '"品牌吗？').then(function() {
        return updateCarBrand(row);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.disabled = row.disabled === 0 ? 1 : 0;
      });
    },
  }
};
</script>
<style scoped lang="scss">
.el-upload .el-upload--picture-card {
    width: 248px;
}

::v-deep .el-table--medium .el-table__cell {
  padding: 0 !important;
}

</style>
